<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08_员工列表练习</title>
</head>
<body>
<input type="text" placeholder="请输入员工姓名" id="i1">
<input type="text" placeholder="请输入员工工资" id="i2">
<input type="text" placeholder="请输入员工岗位" id="i3">
<button onclick="addPeople()">添加员工</button>
<hr>
<table border="1px">
    <caption>员工表</caption>
    <tr>
        <th>姓名</th>
        <th>工资</th>
        <th>岗位</th>
    </tr>
</table>
<script>
    //8.准备一个数组,用来保存收集到的数据,给后端发请求时使用
    let arr = [];
    //1.定义方法，每次点击新增员工按钮时，调用
  function addPeople(){
      //2.获取输入框中的数据
    let uName=document.getElementById(i1).value;
    let uSalary=document.getElementById(i2).value;
    let uJob=document.getElementById(i3).value;
    //3.创建一个tr与三个td元素
      let tr=document.createElement('tr');
      let nameTd=document.createElement('td');
      let salaryTd=document.createElement('td');
      let jobTd=document.createElement('td');
      //4.将上方从输入框中收集到的数据装入单元格
      nameTd.innerHTML=uName;
      salaryTd.innerHTML=uSalary;
      jobTd.innerHTML=uJob;
      //5.将准备好的单元格追加在tr之后
    tr.append(uname,usalary,ujob);
    //6.获取表格元素
      let table=document.querySelector('table');
      table.append(tr);
      //7.清空输入框
      document.getElementById('i1').value='';
      document.getElementById('i2').value='';
      document.getElementById('i3').value='';
      //9.将收集到的员工数据存入表格中
      arr.push({
          name:uName,
          salary:uSalary,
          job:uJob
      });
      console.log(arr);
}
</script>
</body>
</html>